<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>考试列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 考试列表区域 -->
      <el-table :data="examineList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="考试id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="考试场次" prop="name" width="164px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="考试科目" prop="subject" width="100px"></el-table-column>
        <el-table-column label="考试成绩" prop="grade" width="100px"></el-table-column>
        <el-table-column label="成绩说明" prop="remark" width="100px" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="考试阶段" prop="stage" width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.stage==='报名结束'?'warning':scope.row.stage==='考试结束'?'info':''">
              {{ scope.row.stage }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="考试日期" prop="date" width="100px"></el-table-column>
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <!-- 取消报名按钮 -->
            <el-button type="primary" icon="el-icon-remove" size="mini" :disabled="scope.row.stage !== '报名中'"
                       @click="cancelApple(scope.row.id)">取消报名</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

  </div>
</template>

<script>
export default {
  name: "ExamineManage",
  data() {
    return {
      subjectOptions: ['科目一', '科目二', '科目三', '科目四'],
      stageOptions: ['报名中', '报名结束', '考试中', '考试结束'],
      // 考试信息列表
      examineList: [],

    }
  },

  created() {
    this.getExamineList()
  },
  methods: {
    // 获取考试列表
    getExamineList() {
      this.$http.get('/driver/examine/appointList').then(res => {
        if (res.data.code === 200) {
          this.examineList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },

    // 取消报名
    cancelApple(id) {
      this.$http.get('/driver/studentExamine/cancel/appoint', {
        params: {
          id: id
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getExamineList()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },

  }
}
</script>

<style scoped>

</style>
